<template>
  <div class="app">
    <!-- 菜单开始 -->
    <van-dropdown-menu>
      <van-dropdown-item title="学习" ref="item">
        <div class="className">
          <p>年级</p>
          <van-row type="flex" justify="space-between">
            <van-col
              @click="classClick(item.num)"
              class="classBtn classBtnThree"
              v-for="(item, index) in classOne"
              :key="index"
              span="5"
              >{{ item.leavel }}</van-col
            >
          </van-row>
        </div>
        <div class="className">
          <p>学科</p>
          <van-row type="flex" justify="space-between">
            <van-col
              @click="aaa(item.num)"
              class="classBtn classBtnTow"
              v-for="(item, index) in xueKe"
              :key="index"
              span="5"
              >{{ item.classMo }}</van-col
            >
          </van-row>
        </div>
        <div class="nav_bottom">
          <van-button type="danger" @click="ClickCancel">选择重置</van-button>
          <van-button type="primary" @click="confirmClick">确定点击</van-button>
        </div>
      </van-dropdown-item>

      <van-dropdown-item v-model="value" @change="nav_tow" :options="option" />
      <van-dropdown-item :title="valuesPlus" ref="items">
        <van-row type="flex" justify="space-between">
          <van-col
            @click="threeClick(item.id, item.text)"
            v-for="(item, index) in threeListConRight"
            :key="index"
            class="classBtn"
            span="5"
            >{{ item.text }}</van-col
          >
          <van-col
            @click="threeClick(10,'会员课')"
            class="classBtn classBtnXiang"
            span="5"
            >会员课</van-col
          >
        </van-row>
      </van-dropdown-item>
    </van-dropdown-menu>
    <!-- 菜单结束 -->
  </div>
</template>

<script>
import { lglGettingDataContainer } from "../../util/http";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      //第一个 下拉框的 数据
      classOne: [
        { leavel: "初一", num: 1 },
        { leavel: "初二", num: 2 },
        { leavel: "初三", num: 3 },
        { leavel: "高一", num: 4 },
        { leavel: "高二", num: 5 },
      ],
      xueKe: [
        { classMo: "语文", num: 7 },
        { classMo: "数学", num: 8 },
        { classMo: "英语", num: 9 },
        { classMo: "物理", num: 10 },
        { classMo: "化学", num: 11 },
      ],
      //点击第一个下拉框的coll数据id
      one: 0,
      xue: 0,
      //第二个下拉框的数据
      option: [
        { text: "综合排序", value: 0 },
        { text: "最新", value: 1 },
        { text: "最热", value: 2 },
        { text: "价格从低到高", value: 3 },
        { text: "价格从高到低", value: 4 },
      ],
      //第三个下拉框的数据
      threeListConRight: [
        { text: "全部", id: "" },
        { text: "大班课", id: 2 },
        { text: "小班课", id: 3 },
        { text: "公开课", id: 4 },
        { text: "点播课", id: 5 },
        { text: "面授课", id: 6 },
        { text: "音频课", id: 7 },
        { text: "系统课", id: 8 },
        { text: "图文课", id: 9 },
      ],
      //三数据
      course_type: "", //代表全部
      order: "",
      //kuang
      isChose: "",
      value: 0,
      valuesPlus: "选择",
      switch1: false,
      switch2: false,
      isShow: false, // 找不到数据的时候 为 false
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.gettingData();
  },
  methods: {
    //进入页面请求接口 渲染数据
    async gettingData() {
      await lglGettingDataContainer({
        xue: "",
        one: "",
        order: "",
        course_type: "",
        page:1
      }).then((res) => { 
        this.listContainer = res.list;
        this.isShow = true;
        //刚开始进入页面子组件把数据传递给父组件
        let data = {
          res: res.list,
          isShow: true,
        };
        this.$emit("listContainer", data);
      });
    },
    //点击空白消失
    onConfirm() {
      this.$refs.item.toggle();
    },
    //获取数据
    aaa(num) {
      this.xue = num;
    },
    classClick(num) {
      this.one = num;
    },
    //点击取消按钮
    ClickCancel() {
      this.one = 0;
      this.xue = 0;
      this.gettingData();
      this.$refs.item.toggle();
    },

    //点击确认按钮
    async confirmClick() {
      let one = this.one; //年级id
      let xue = this.xue; // 科目id
      //判断空
      if (this.one == 0 || this.xue == 0) {
        return alert("请选择");
      }
      //携带两个id 去请求数据
      await lglGettingDataContainer({
        one,
        xue,
        order: this.order,
        course_type: this.course_type,
      }).then((res) => {
        if (res.list.length == 0) {
            this.$emit("isShow",false)
          this.$refs.item.toggle();
        } else {
            this.$emit("containerListRight",{isShow:true,container:res.list})
          this.$refs.item.toggle();
        }
      });
    },
    //第二个
    async nav_tow(e) {
      let one = this.one; //年级id
      let xue = this.xue; // 科目id
      this.order = e;
      let course_type = this.course_type;
      if (one == 0 && xue == 0) {
        one = "";
        xue = "";
      }
      await lglGettingDataContainer({
        one,
        xue,
        order: this.order,
        course_type,
        page:1
      }).then((res) => {
          this.$emit("towListContainerRight",res.list)
      });
    },
    //第三个
    async threeClick(id, text) {
      this.valuesPlus = text;
      this.course_type = id;
      this.$refs.items.toggle();
      //拿到数据
      let one = this.one; //年级id
      let xue = this.xue; // 科目id
      let order = this.order;
      let course_type = this.course_type;
      if (one == 0 && xue == 0) {
        one = "";
        xue = "";
      }
      await lglGettingDataContainer({
        one,
        xue,
        order: this.order,
        course_type: id,
        page:1
      }).then((res) => {
          this.$emit("threeListContainerRight",res.list)
      });
    },

  },
};
</script>

<style scoped >
.className {
  height: 140px;
  border-bottom: 1px solid #000;
  padding: 10px;
}
.van-col {
  text-align: center;
  line-height: 30px;
}
.classBtn {
  background: #ddd;
  border-radius: 12%;
  margin-top: 10px;
}
.classBtn:hover {
  background-color: orange;
}
.classBtnTow:hover {
  background-color: orange;
}
.nav_bottom {
  margin: 15px;
  display: flex;
  justify-content: space-around;
}
.classBtnXiang {
  margin-right: 5.26667rem;
}
.app{
  position: fixed;
  width: 100vw;
  top: 45px;
  z-index: 1;
}
</style>
